<template>
  <!-- 底部按钮高度50px -->
  <div class="btnArr">
    <!-- 
        state值
        0:待卖家确认
        1:待发货
        2:待支付
        3:待收货
        4:自提订单
        5:已取消
        6:卖家处理中
        7:已退货退款
        8:拒绝处理  
        9:待评价
       -->
    <van-button
      v-if="state == 6 || state == 7 || state == 8"
      plain
      hairline
      type="primary"
      @click="goDesc(orderId)"
      size="small"
      >查看详情</van-button
    >
    <div v-if="state == '0'">
      <van-button
        plain
        hairline
        type="primary"
        @click="twoBuy(orderId)"
        size="small"
        >再次购买</van-button
      >
    </div>
    <div v-if="state == '1'" class="btnList">
      <van-button
        plain
        hairline
        type="primary"
        @click="twoBuy(orderId)"
        size="small"
        >再次购买</van-button
      >
      <van-button
        class="btn2"
        plain
        hairline
        type="primary"
        @click="received(orderId)"
        size="small"
        >确认收货</van-button
      >
    </div>
    <div v-if="state == '2'" class="btnList">
      <van-button
        class="btn1"
        plain
        hairline
        type="primary"
        @click="notOrder(orderId)"
        size="small"
        >取消订单</van-button
      >
      <van-button
        plain
        hairline
        type="primary"
        @click="twoBuy(orderId)"
        size="small"
        >再次购买</van-button
      >
      <van-button
        class="btn2"
        plain
        hairline
        type="primary"
        @click="goBuy(orderId)"
        size="small"
        >去支付</van-button
      >
    </div>
    <div v-if="state == '3'" class="btnList">
      <van-button
        plain
        hairline
        type="primary"
        @click="twoBuy(orderId)"
        size="small"
        >再次购买</van-button
      >
      <van-button
        class="btn2"
        plain
        hairline
        type="primary"
        @click="received(orderId)"
        size="small"
        >确认收货</van-button
      >
    </div>

    <div v-if="state == '4'" class="btnList">
      <van-button
        plain
        hairline
        type="primary"
        @click="twoBuy(orderId)"
        size="small"
        >再次购买</van-button
      >
      <van-button
        class="btn2"
        plain
        hairline
        type="primary"
        @click="meCode(orderId)"
        size="small"
        >显示自提码</van-button
      >
    </div>
    <div v-if="state == '5'" class="btnList">
      <van-button
        plain
        hairline
        type="primary"
        @click="delOrder(orderId)"
        size="small"
        >删除订单</van-button
      >
      <van-button
        class="btn2"
        plain
        hairline
        type="primary"
        @click="twoBuy(orderId)"
        size="small"
        >再次购买</van-button
      >
    </div>
    <div v-if="state == '9'" class="btnList">
      <van-button
        class="btn1"
        plain
        hairline
        type="primary"
        @click="delOrder(orderId)"
        size="small"
        >删除订单</van-button
      >
      <van-button
        plain
        hairline
        type="primary"
        @click="twoBuy(orderId)"
        size="small"
        >再次购买</van-button
      >
      <van-button
        class="btn2"
        plain
        hairline
        type="primary"
        @click="goComments(orderId)"
        size="small"
        >去评价</van-button
      >
    </div>
    <div v-else></div>
  </div>
</template>

<script>
export default {
  props: ["state",'orderId'],
  created(){
      console.log();
  },
  methods: {
    //查看退货订单详情
    goDesc(order) {
      console.log(order);
      this.$router.push({ name: "backProductDetail", params: { order: order,state:'5' } });
    },
    //删除订单
    delOrder(order) {
      console.log(order);
    },
    //再次购买
    twoBuy(order) {
      console.log(order);
      alert('传商品id,跳转到购物车')
    },
    //确认收货
    received(order) {
      console.log(order);
    },
    //去评论
    goComments(order) {
      console.log(order);
      this.$router.push({name:'Comnents',params:{orderId:'1'}})
    },
    //取消订单
    notOrder(order) {
      console.log(order);
    },
    //去支付
    goBuy(order) {
      console.log(order);
      this.$router.push('/settlement')
    },
    //显示自提码
    meCode(order) {
      console.log(order);
    },
  },
};
</script>

<style scoped lang="less">
  .btnArr {
    width: 100%;
    height: 45px;
    background-color: white;
    padding-top: 5px;
    text-align: right;
    .van-button {
      width: 90px;
      margin: 6px;
    }
  }
  .btn1 {
    color: gray;
    border-color: rgba(128, 128, 128, 0.692);
  }
  .btn2 {
    color: white;
    background-color: #4bd863;
    font-weight: 800;
  }
  .specifications {
    height: 20px;
    display: inline-block;
    // *display: inline;
    // *zoom: 1;
    line-height: 20px;
    border-radius: 5px;
    padding: 0 5px;
    background-color: rgba(212, 211, 211, 0.815);
  }
</style>